<template>
    <h4>学习shallowReactive</h4>
    <button @click="changeName(p1)">换个名字</button>
    <button @click="changePersion(p1)">换个对象</button>
    <button @click="changeHobby(p1)">换个爱好</button>
    姓名：{{ p1.name }}<br />
    年龄：{{ p1.age }}<br />
    爱好：{{ p1.hobby }}<br />
    <br />
    <h4>学习shallowRef</h4>
    <button @click="changeName(p2)">换个名字</button>
    <button @click="changePersion(p2)">换个对象</button>
    <button @click="changeHobby(p2)">换个爱好</button>
    姓名：{{ p2.name }}<br />
    年龄：{{ p2.age }}<br />
    爱好：{{ p2.hobby }}<br />
</template>

<script>
import { shallowRef, shallowReactive } from 'vue'
export default {
    name: 'Study_shallow',
    setup() {
        let person = {
            name: 'BadPig',
            age: 25,
            hobby: [
                {
                    name: 'cycling',
                    star: 9
                },
                {
                    name: 'game',
                    star: 8
                },
                {
                    name: 'music',
                    star: 7
                }
            ]
        }

        let p1 = shallowReactive(person)
        let p2 = shallowRef(person)

        function changeName(personTemp) {
            personTemp.name += '~'
        }

        function changeHobby(personTemp) {
            personTemp.hobby[0] = {}
        }

        function changePersion() {
            p2.value = {
                name: 'BadPig',
                age: 25,
                hobby: [
                    {
                        name: 'cycling',
                        star: 9
                    },
                    {
                        name: 'game',
                        star: 8
                    },
                    {
                        name: 'music',
                        star: 7
                    }
                ]
            }
        }

        return {
            p1,
            p2,
            changeName,
            changePersion,
            changeHobby
        }
    }
}
</script>

<style></style>